<template>
    <div class="box">
        <el-form :model="form" label-width="60px" ref="ruleFormRef" :rules="rules">
            <el-form-item label="账号" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script lang="ts" setup>
import type { User } from '../types'
import { reactive, ref } from 'vue'
import {useRouter} from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const router =useRouter()
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入账户', trigger: 'blur' },
        { min: 3, max: 5, message: '账号长度3-5位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '账号长度6-12位', trigger: 'blur' },
    ],
})

// do not use same name with ref
const form = reactive<User>({
    name: '',
    password: '',
})

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('登录!')
            router.push('/index')
        } else {
            console.log('错误!', fields)
        }
    })
}
</script>

<style lang="less">
* {
    margin: 0;
    padding: 0;
}

.box {
    // border: 1px solid tomato;
    width: 300px;
    margin: auto;
    padding: 100px;
}
</style>

